<template>
	<div>
		<city-header></city-header>
		<city-search :citylistdata="data" ></city-search>
		<city-list :data="data" :alphabet="alphabet" :listAreas="listAreas"></city-list>		
	</div>
</template>

<script>
	import Bscroll from 'better-scroll'
	import CityHeader from "./components/cityheader"
	import CitySearch from "./components/citySearch"
	import CityList from "./components/citylist"
	export default{
		name:"City",
		components:{
			CityHeader,
			CitySearch,
			CityList
		},
		data:function(){
			return{
				alphabet:[],
				listAreas:[],
				data:[]
			}
		},
		methods:{
			getCityInfo:function(){
			this.axios.get('api/city.json')
				.then(this.getCityInfoSucc)
			},
			getCityInfoSucc:function(res){
				res=res.data
				// console.log(res)
				// console.log(res.data.alphabet)
				// alert(res.alphabet)
				if(res.alphabet){
					this.alphabet=res.alphabet
					// this.listAreas=data.hotlistAreas
				}
				if(res.hotlistAreas){
					this.listAreas=res.hotlistAreas
					this.data=res.cityList
				}
			}
		},
		created:function(){
			this.getCityInfo()
		}		
	}
</script>

<style scoped="scoped">

</style>
